<template>
    <view>
        <view class="page" :style="'padding-bottom:' + marginBottom + 'rpx;'">
            <view class="hair">
                <view class="flexbox">
                    <view>
                        <image class="headerimg mr-30" mode="aspectFill" :src="hairlist.headPortrait"></image>
                    </view>
                    <view class="w-100">
                        <view class="flextitle">
                            <view class="centers">
                                <text class="titletext1 mr-10">{{ hairlist.nickname }}</text>
                                <text class="titletext2">{{ hairlist.position }}</text>
                            </view>
                            <view class="centers">
                                <image class="shopicon mr-10" :src="imgUrl + 'clip2.png'"></image>
                                <text class="icontext">{{ hairlist.star }}</text>
                            </view>
                        </view>
                        <view class="order mt-20">总接单{{ hairlist.orderNumer }}</view>
                        <!-- <view class="age mt-6">
          {{hairlist.gender === 1 ? '男' : '女'}}{{hairlist.yearbirth ? '｜'+hairlist.yearbirth : hairlist.yearbirth}}
        </view>
        
        <view class="works mt-6">首席理发师、沙宣美发沙龙认证发型师</view> -->
                        <view class="mt-20 obtain">{{ hairlist.yearbirth }}</view>
                    </view>
                </view>
                <!-- <view class="mt-20 centers">
      <image class="shopicon3 mr-10" src="{{imgUrl + 'shopserver.png'}}"></image>
      <text class="time1">排班时间: </text>
      <text class="time2">10:00-22:00</text>
    </view> -->
                <view :class="(showadept ? 'adeptbox' : 'adeptbox1') + ' mt-20'">
                    <view class="adeptList">
                        <view class="mstext">擅长：</view>
                        <view class="adept" v-for="(item, index) in hairlist.newadept" :key="index">
                            {{ item }}
                        </view>
                    </view>

                    <view class="adeptbtn" v-if="hairlist.newadept.length > 5">
                        <image v-if="showadept" @tap="toMoreadept" class="topicon" :src="imgUrl + 'bottom.png'"></image>
                        <image v-if="!showadept" @tap="toMoreadept" class="topicon" :src="imgUrl + 'top.png'"></image>
                    </view>
                </view>
                <view :class="(showbrief ? 'briefbox' : '') + ' mt-20'">
                    <text class="mstext">简介：</text>
                    <text class="brief">{{ hairlist.description || '无' }}</text>
                </view>
                <view class="mt-20" v-if="hairlist.description.length > 35">
                    <text v-if="showbrief" class="morebrief" @tap="toMorebrief">查看更多</text>
                    <text v-if="!showbrief" class="morebrief" @tap="toMorebrief">收起</text>
                </view>
                <view class="iconfelx">
                    <view class="iconfelx" :data-mobile="hairlist.mobile" @tap="onMobile">
                        <image class="shopicon1" :src="imgUrl + 'shopphone.png'"></image>
                        <text>电话咨询</text>
                    </view>
                    <!-- <view class="iconfelx">
        <image class="shopicon1 mr-10" src="{{imgUrl + 'shopconsult.png'}}">
        </image>
        <text>咨询</text>
      </view> -->
                    <view class="iconfelx" @tap.stop.prevent="onCollection" :data-stylistid="hairlist.stylistId">
                        <image class="shopicon1" :src="imgUrl + 'shoplove.png'"></image>
                        <text>{{ bool ? '已收藏' : '加入收藏' }}</text>
                    </view>
                </view>
            </view>
            <!-- 0 无 1 门店邀请中,待处理 2 门店邀请成功 3 门店邀请过,被拒绝 4 美发师申请中,待处理 5 美发师申请成功 6 美发师申请过,被拒绝 -->
            <view class="cencel-container" @tap.stop.prevent="apply" v-if="hairlist.status == 0">
                <text class="cencel">邀请入驻</text>
            </view>
            <text class="warn" v-if="hairlist.status == 4">申请成为{{ nexus == 0 ? '网约美发师' : '店内美发师' }}</text>
            <text class="warn" v-if="hairlist.status == 1">邀请成为{{ nexus == 0 ? '网约美发师' : '店内美发师' }}</text>
            <view class="cencel-container" @tap.stop.prevent="apply" v-if="hairlist.status == 3 || hairlist.status == 6">
                <text class="cencel">重新邀请</text>
            </view>
            <view class="cencel-container-o" @tap.stop.prevent="cancelInviteNexus" v-if="hairlist.status == 1">
                <text class="cencel">取消邀请</text>
            </view>
            <view class="accept-container" v-if="hairlist.status == 4">
                <view class="refuse" @tap.stop.prevent="refuse">拒绝</view>
                <view class="agree" @tap.stop.prevent="agree">同意</view>
            </view>
            <view class="cencel-container" @tap.stop.prevent="terminate" v-if="hairlist.status == 2 || hairlist.status == 5">
                <text class="cencel">解约</text>
            </view>
            <!-- 
  <view class="mealds">
    <view class="mdlsflexbox">
      <view class="centers">
        <view class="circle-1"></view>
        <text class="sybtext1">洗发 </text>
      </view>
      <view class="centers">
        <text class="menu-price">￥68.0</text>
      </view>
    </view>
    <view class="mdlsflexbox">
      <view class="centers">
        <view class="circle-1"></view>
        <text class="sybtext1">洗吹剪 </text>
      </view>
      <view class="centers">
        <text class="menu-price">￥68.0-￥198.0</text>
      </view>
    </view><view class="mdlsflexbox">
      <view class="centers">
        <view class="circle-1"></view>
        <text class="sybtext1">烫发 </text>
      </view>
      <view class="centers">
        <text class="menu-price">￥68.0-￥198.0</text>
      </view>
    </view>
  </view> -->

            <!-- <view class="xjcbox mt-20">
    <view wx:for="{{cardServerList}}" wx:key="index" wx:if="{{index <= showLength}}">
      <view class="flexbox3" bindtap="onShowList" data-id="{{item.serviceId}}" data-bool="{{item.bool}}">
        <view class="showleft">
          <view class="dotbox">
            <view class="bigdot">
            </view>
            <view class="smalldot"></view>
          </view>
          <view class="showtext2">{{item.name}}</view>
        </view>
        <view class="showtext1 centers">
          <text wx:if="{{item.toPrice < 1}}">￥{{item.price}}</text>
          <text wx:if="{{item.toPrice}}">￥{{item.price}} - ￥{{item.toPrice}}</text>
          <image class="shopicon4" wx:if="{{item.isgroup == false}}"
            src="{{item.bool && item.sds.length > 0 ? imgUrl + 'bottom.png' : imgUrl + 'right.png'}}"></image>
          <view class="shopicon4" wx:if="{{item.isgroup == true}}"></view>
        </view>
      </view>
      <view class="{{item.bool ? 'show' : 'hidden'}}">
        <view wx:for="{{item.sds}}" wx:key="index" class="flexbox3">
          <view class="showleft">
            <view class="showtext2">{{item.name}}</view>
          </view>
          <view class="showtext1 centers">
            <text>￥{{item.itemprice}}</text>
          </view>
        </view>
      </view>

    </view>
    <view class="showbtn" wx:if="{{cardServerList.length > 3}}">
      <image wx:if="{{showLength < cardServerList.length}}" bindtap="showmore" class="topicon"
        src="{{imgUrl + 'bottom.png'}}"></image>
      <image wx:if="{{showLength == cardServerList.length}}" bindtap="showmuch" class="topicon"
        src="{{imgUrl + 'top.png'}}">
      </image>
    </view>
  </view> -->
            <!-- <view class="detail-serverness" wx:if="{{!cardServerList.length}}">美发师暂未添加服务~</view> -->
            <view class="mealbox" @tap="onShowmeal" v-if="hairlist.cardCouponDTOs.length > 0 || hairlist.cardPackages.length > 0">
                <view class="mealbox1" v-if="onebool || morebool">
                    <view class="mealimg mealimgbox mr-10" v-if="onebool">
                        <image class="mealimg" :src="imgUrl + 'hairmeal.png'"></image>
                        <text class="mealtext1">单项套餐券</text>
                        <text class="mealtext2">购</text>
                    </view>
                    <view class="mealimg mealimgbox" v-if="morebool">
                        <image class="mealimg" :src="imgUrl + 'hairmeal1.png'"></image>
                        <text class="mealtext1">多项套餐券</text>
                        <text class="mealtext2">购</text>
                    </view>
                </view>
                <view :class="'mealbox2 ' + (onebool || morebool ? 'mt-20' : '')" v-if="hairlist.cardCouponDTOs.length > 0">
                    <view class="mealtext3 mr-10" v-if="index < 3" v-for="(item, index) in hairlist.cardCouponDTOs" :key="index">
                        <text v-if="item.type == 1">满{{ item.amount }}减{{ item.deduction }}</text>

                        <text v-if="item.type == 2">限时{{ item.deduction }}折扣</text>
                    </view>
                    <!-- <view class="centers pab">
        <view class="mealtext4">{{hairlist.cardCouponDTOs.length + hairlist.cardPackages.length}}个优惠</view>
        <image class="topicon" src="{{imgUrl + 'bottom.png'}}"></image>
      </view> -->
                </view>
            </view>
            <van-tabs
                :active="active"
                @change="onChange"
                title-active-color="#333333"
                title-inactive-color="#999999"
                custom-class="custom-class"
                class="hairstylelistdetails-tab-item"
            >
                <!-- <van-tab title="服务门店">
      <showtime bind:gettime="onClickTime"></showtime>
      <view class="shopbox" bindtap="toShopdetails" wx:for="{{serverStoreList}}" data-item="{{item}}" wx:key="index"
        wx:if="{{serverStoreList.length > 0 && week==item.week}}">
        <view class="shopleft">
          <view>
            <image class="shopimg" mode="aspectFill" src="{{item.picture}}"></image>
          </view>
          <view>
            <view class="names">
              <text>{{item.storeName}}</text>
            </view>
            <view class="score centers">
              <view>总接单{{item.orderNumber}}</view>
              <image class="clip" src="{{item.score < 5 ? imgUrl + 'clip1.png' : imgUrl + 'clip2.png'}}"></image>
              <text>{{item.score}}</text>
            </view>
            <view class="site">
              <text>地址：</text>
              <text>{{item.location}}</text>
            </view>
          </view>
        </view>
        <view class="shopright">
          <view class="map centers">
            <text wx:if="{{item.distance < 1000}}">{{item.distance}}m</text>
            <text wx:if="{{item.distance >= 1000}}">{{item.newdistance}}km</text>
            <van-icon name="location-o" />
          </view>
        </view>
      </view>
      <view class="w-100">
        <van-empty wx:if="{{serverStoreList.length == 0 || serverStoreList == null}}" description="暂无服务门店" />
      </view>
    </van-tab> -->
                <van-tab title="服务项目">
                    <view class="serverList" v-for="(item, index) in serverList" :key="index">
                        <view class="serviceName" v-if="item.toPrice > 0">
                            <view>{{ item.name }}</view>
                            <view class="centers">
                                <view class="servermoneySection">￥{{ item.price }}-￥{{ item.toPrice }}</view>
                                <image
                                    class="topicon"
                                    :src="item.isactivity ? imgUrl + 'top.png' : imgUrl + 'bottom.png'"
                                    @tap.stop.prevent="onChecked"
                                    :data-item="item"
                                    v-if="item.isgroup == false"
                                ></image>
                            </view>
                        </view>

                        <view class="serviceName" v-if="item.toPrice == 0 || !item.toPrice">
                            <view>{{ item.name }}</view>
                            <view class="centers">
                                <view class="servermoneySection">￥{{ item.price }}</view>
                                <image
                                    class="topicon"
                                    :src="item.isactivity ? imgUrl + 'top.png' : imgUrl + 'bottom.png'"
                                    @tap.stop.prevent="onChecked"
                                    :data-item="item"
                                    v-if="item.isgroup == false"
                                ></image>
                            </view>
                        </view>

                        <view v-if="item.isactivity == false" v-for="(v, index1) in item.sds" :key="v.serviceId">
                            <view class="serverFlex-1">
                                <view :data-item="item.icon" @tap="previewImg">
                                    <image :src="item.icon" class="serverImg"></image>
                                </view>
                                <view class="serverFlex-2">
                                    <view>
                                        <view class="serverFlex-name">【{{ item.name }}】-{{ v.name }}</view>
                                    </view>
                                    <label class="centers">
                                        <view class="mt-12 serverFlex-price mr-20">￥{{ v.itemprice }}</view>
                                    </label>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="detail-serverness" v-if="!serverList.length">美发师暂未添加服务~</view>
                </van-tab>
                <van-tab title="精品推荐">
                    <view class="flexs justify-between padding-lr-sms padding-bottom">
                        <view
                            class="goods_info radius margin-top-sm bg-white"
                            @tap="toDetails"
                            :data-goodsid="item.id"
                            v-if="commodityinfoList.length > 0"
                            v-for="(item, index) in commodityinfoList"
                            :key="index"
                        >
                            <image class="goods_img" :src="item.pic" />

                            <view v-if="item.sale" class="goods_sold padding-lr-sm text-sm text-white">已售: {{ item.sale }}</view>

                            <view class="padding-lr-sm margin-tb-sm text-df text-tline">{{ item.name }}</view>

                            <view class="flexs align-center padding-lr-sm padding-bottom">
                                <view class="text-price text-red text-df text-bold">{{ item.price }}</view>
                                <view class="padding-left-sm text-price text-darkGray text-sm text-through" v-if="item.originalPrice">{{ item.originalPrice }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="w-100">
                        <van-empty v-if="commodityinfoList.length == 0 || commodityinfoList == null" description="暂无数据" />
                    </view>
                </van-tab>
                <van-tab title="个人作品">
                    <view class="exhibitionbox">
                        <view class="exhibition" @tap="onDetail" :data-item="item" v-for="(item, index) in exhiblist" :key="index">
                            <view>
                                <image class="exhibitionimg1" mode="aspectFill" :src="item.cover"></image>
                            </view>

                            <view>
                                <text>{{ item.describe }}</text>
                            </view>

                            <view></view>

                            <view>
                                <view>
                                    <image class="exhibitionimg2" mode="aspectFill" :src="item.headportrait"></image>
                                    <text>{{ item.nickname }}</text>
                                </view>
                                <view class="centers">
                                    <image
                                        :data-opusId="item.opusId"
                                        :data-isCollection="item.isCollection"
                                        @tap.stop.prevent="onLove"
                                        class="loveicon"
                                        :src="item.isCollection ? imgUrl + 'love.png' : imgUrl + 'hollow.png'"
                                    ></image>
                                    <text>{{ item.collection }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="w-100">
                        <van-empty v-if="exhiblist.length == 0 || exhiblist == null" description="暂无作品" />
                    </view>
                </van-tab>
                <van-tab title="订单评价">
                    <view class="evaluatebox">
                        <view class="evaluate">
                            <view>综合评分</view>
                            <view class="centers evaluatelistbox">
                                <view>
                                    <l-rate disabled :score="comprehensive" size="26" :item-gap="10" active-color="orange" inactive-color="white" />
                                </view>
                                <view class="evatext">{{ comprehensive }}分</view>
                            </view>
                        </view>
                        <view class="usercomment mt-20" v-for="(item, index) in commentList" :key="index">
                            <view class="flexbox usertile">
                                <view class="flexbox">
                                    <image class="headerimg1 mr-30" mode="aspectFill" :src="item.headImg"></image>
                                    <view class="textfelx">
                                        <view class="usertext1">{{ item.nickname }}</view>
                                        <view class="usertext3 mtb-10">门店：{{ item.storeName }}</view>
                                        <view class="usertext2">服务项目：{{ item.serviceName }}</view>
                                    </view>
                                </view>
                                <view class="evaluate1">
                                    <view>
                                        <l-rate disabled :score="item.level" size="28" :item-gap="10" active-color="orange" inactive-color="white" />
                                        <text class="evatext1">{{ item.level }}</text>
                                    </view>
                                    <view class="evatime mt-20 mr-10">{{ item.createtime }}</view>
                                </view>
                            </view>

                            <view class="usereva">
                                <view :class="item.showtext ? 'userevatext1' : 'userevatext'">点评：{{ item.comment }}</view>
                                <view class="mt-20" v-if="item.bool">
                                    <text v-if="!item.showtext" class="more" @tap="toMore" :data-index="index">全文</text>
                                    <text v-if="item.showtext" class="more" @tap="toMore" :data-index="index">收起</text>
                                </view>
                            </view>

                            <view class="imglistflexbox">
                                <view class="mt-10 mr-10" :data-item="item" :data-paths="item.imgPaths" @tap="previewImg" v-for="(item, index1) in item.imgPaths" :key="item.id">
                                    <image class="img-200" mode="aspectFill" :src="item"></image>
                                </view>
                            </view>

                            <view class="box1" v-if="item.reply || item.storeReply">
                                <view class="centerx" v-if="item.reply">
                                    <view class="placeholder-class">
                                        <text style="color: #666666; font-weight: 600">美发师回复：</text>
                                        {{ item.reply }}
                                    </view>
                                </view>
                                <view class="centerx" v-if="item.storeReply">
                                    <view class="placeholder-class">
                                        <text style="color: #666666; font-weight: 600">门店回复：</text>
                                        {{ item.storeReply }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="w-100">
                            <van-empty v-if="commentList.length == 0 || commentList == null" description="暂无评价" />
                        </view>
                    </view>
                </van-tab>
            </van-tabs>
        </view>
        <van-dialog use-slot :show="show" :show-confirm-button="false">
            <view class="msg">是否与该美发师解约？</view>
            <view class="flexbox-sb box">
                <view class="btn1" @tap="onClose">
                    <image class="btnimg" :src="imgUrl + 'walletleftbtn.png'"></image>
                    <text class="btntext">取消</text>
                </view>
                <view class="btn2" @tap="onTerminate">
                    <image class="btnimg" :src="imgUrl + 'walletrightbtn.png'"></image>
                    <text class="btntext">确认</text>
                </view>
            </view>
        </van-dialog>

        <van-overlay z-index="99" :show="showoverlay" @click="onClickHide">
            <view class="overlaybox" @tap.stop.prevent="shop">
                <view class="overlaytext1">联系美发师</view>
                <!-- <view class="overlaytext2">服务时间：{{hairlist.serverTypes}}</view> -->
                <view class="overlaybox1" @tap.stop.prevent="goMobile">
                    {{ hairlist.newmobile }}
                </view>
            </view>
            <view class="overlaybox2" @tap.stop.prevent="onClickHide">取消</view>
        </van-overlay>
        <van-popup z-index="99" custom-style="height: 346px" :show="showmeal" round position="bottom" @close="onClose" close-icon="cross" @click="onClickmealHide" closeable>
            <view class="overlaymealbox" @tap.stop.prevent="shop">
                <view class="meal-title">
                    Hi，这是你的专属优惠券
                    <!-- <view class="icon1" catchtap="onClickmealHide"><van-icon name="cross" size="50rpx" color="#999999" /></view> -->
                    <!-- <van-icon name="close" size="50rpx" color="black" /> -->
                </view>
                <view class="box-1 mt-20" v-for="(item, index) in hairlist.cardCouponDTOs" :key="index">
                    <view class="shopcoupon" v-if="item.type == 2">折扣券</view>

                    <view class="shopcoupon" v-if="item.type == 1">满减券</view>

                    <view class="flexbox-sb">
                        <view class="centers">
                            <view class="menoy mr-30 centers" v-if="item.type == 1">
                                <text class="c-text7">￥</text>
                                <text class="c-text6">{{ item.deduction }}</text>
                            </view>
                            <view class="menoy mr-30 centers" v-if="item.type == 2">
                                <text class="c-text6">{{ item.deduction }}</text>
                                <text class="c-text6">折</text>
                            </view>
                            <view class="flexbox1">
                                <view class="c-text1" v-if="item.type == 1">满{{ item.amount }}减{{ item.deduction }}元</view>
                                <view class="c-text1" v-if="item.type == 2">{{ item.deduction }}折扣券</view>
                                <view class="c-text2">美发师折扣券</view>
                                <view class="c-text2">仅美发师{{ item.stylistName }}可用</view>
                            </view>
                        </view>
                    </view>

                    <view class="flexbox-sb mt-20">
                        <view class="c-text4">有效期至：{{ item.validend }}</view>
                        <!-- <view class="c-btn1" catchtap="getdrawCoupon" data-item="{{item}}">立即领取</view> -->
                    </view>
                </view>
                <view class="single flexbox" @tap="toBuymeal" :data-id="item.serviceId" v-for="(item, index) in hairlist.cardPackages" :key="index">
                    <view>
                        <image class="header" mode="aspectFill" :src="hairlist.headPortrait"></image>
                    </view>

                    <view class="content" v-if="item.type == 1">
                        <view class="text1 mt-12">{{ item.name }}</view>
                        <view class="text2 mt-12">原价{{ item.costprice / item.times }}元/次，现价{{ item.times }}次{{ item.price }}元</view>
                        <view class="text3 mt-12">
                            <text>¥{{ item.price }}</text>
                            <text>¥{{ item.costprice }}</text>
                        </view>
                    </view>

                    <view class="content" v-if="item.type == 2">
                        <view class="text1 mt-12">{{ item.name }}</view>
                        <view class="text2 mt-12">{{ item.content }}</view>
                        <view class="text3 mt-12">
                            <text>¥{{ item.price }}</text>
                            <text>¥{{ item.costprice }}</text>
                        </view>
                    </view>

                    <!-- <view class="c-btn2" data-item="{{item}}">立即购买</view> -->
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
import { getSevenDay, getToDay, regMobile } from '../../utils/util.js';
export default {
    data() {
        return {
            marginBottom: app.globalData.marginBottom,
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            activeNames: [],

            showLength: 2,

            imglist: [
                {
                    id: 1,
                    imgurl: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    id: 2,
                    imgurl: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    id: 3,
                    imgurl: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    id: 4,
                    imgurl: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    id: 5,
                    imgurl: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                }
            ],

            active: 0,
            evaluatelist: [1, 1, 1, 1, 0.5],
            showtext: true,
            showbrief: true,
            showadept: true,
            hairlist: null,
            bool: '',
            cardServerList: [],
            exhiblist: [],
            lastId: '',
            hair: '',
            showTerminateDialog: true,
            mobileinfovisible: false,
            stylistId: '',
            userid: '',
            nexus: '',
            storeId: '',
            comprehensive: 0,
            commentList: [],
            page: 1,
            shopimgUrl: app.globalData.shopimgUrl,
            status: '',
            week: getSevenDay()[0].num,
            serverList: [],

            // 服务项目
            // 推荐商品
            commodityinfoList: [],

            onebool: false,
            morebool: false,
            serverStoreList: [],
            today: '',
            showoverlay: false,
            show: false,
            showmeal: false,
            serverStoreObj: '',

            v: {
                serviceId: '',
                name: '',
                itemprice: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let storeId = uni.getStorageSync('storeId');
        let hair = JSON.parse(decodeURIComponent(options.hair));
        this.setData({
            hair: hair,
            active: hair.active,
            status: options.status
        });
        this.setData({
            stylistId: this.hair.stylistId,
            userid: this.hair.userId,
            nexus: this.hair.nexus,
            storeId: storeId
        });
    },
    onShow() {
        // 发型师详情
        _request
            .postObj('/storeStylist/card', {
                stylistId: this.hair.stylistId,
                userid: this.hair.userId,
                nexus: this.nexus,
                storeId: uni.getStorageSync('storeId')
            })
            .then((res) => {
                let data = res.data.data;
                data.newmobile = regMobile(data.mobile);
                data.cardPackages.map((item) => {
                    if (item.type == 1) {
                        this.setData({
                            onebool: true
                        });
                    } else if (item.type == 2) {
                        this.setData({
                            morebool: true
                        });
                    }
                });
                var cardServerList = data.cardServerItems || [];

                if (cardServerList && cardServerList.length > 0) {
                    cardServerList = cardServerList.map((item) => {
                        return { ...item, bool: false };
                    });
                }

                if (data.adept && data.adept != null) {
                    data.newadept = data.adept.split(','); //字符分割
                }

                this.setData({
                    cardServerList: cardServerList,
                    hairlist: data,
                    bool: data.isCollection,
                    nexus: data.nexus
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            }); //获取美发师评分

        _request
            .get('/stylistComment/getEvaluate', {
                stylistId: this.hair.stylistId
            })
            .then((res) => {
                this.setData({
                    comprehensive: res.data.data.comprehensive
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 查询美发师服务

        _request
            .get('/specialActivity/cardStylistServers', {
                stylistId: this.stylistId,
                userId: uni.getStorageSync('userid'),
                page: 1,
                size: 10
            })
            .then((res) => {
                this.setData({
                    serverList: res.data.data.cardServerItems
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 获取洗吹
        // 获取洗剪吹
        // 发型师评论详情

        this.getStylistCommentList(1, this.hair.stylistId, false); // 获取服务门店数据
        // this.getStylistStores(1, this.data.hair.stylistId, false)
        // 获取七日门店数据

        this.getStylistStoresInfos(this.hair.stylistId, false); // 美发师获取作品

        this.getScreenDynamicState(); // 查询精品推荐

        this.getStylistRecommendProductList();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        const { active, page, hair, lastId, exhiblist } = this;

        if (active == 2) {
            // 获取更多评价
            this.setData({
                page: page + 1
            });
            this.getStylistCommentList(this.page, hair.stylistId, true);
        } else if (active == 1) {
            // 获取更多作品
            this.getScreenDynamicState(lastId);
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    methods: {
        // 选择项目
        onChecked(e) {
            const { serviceId } = e.currentTarget.dataset.item;
            this.setData({
                serverList: this.serverList.map((item) => {
                    if (item.serviceId == serviceId) {
                        item.isactivity = !item.isactivity;
                    }

                    return item;
                })
            });
        },

        // 查询精品推荐
        getStylistRecommendProductList() {
            _request
                .get(
                    '/stylist-product-recommend/getStylistRecommendProductList',
                    {
                        stylistId: this.hair.stylistId
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            commodityinfoList: res.data.data
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 详情
        toDetails(item) {
            if (item.currentTarget.dataset.goodsid) {
                uni.navigateTo({
                    url: '/shopingmall/goodsdetail/goodsdetail' + this.getparams(item.currentTarget.dataset) + '&sharer=' + this.hairlist.userId
                });
            }
        },

        getparams: function (item) {
            const list = [];

            for (const key in item) {
                if (key === 'url') {
                    continue;
                }

                list.push(key + '=' + item[key]);
            }

            if (list.length) {
                return '?' + list.join('&');
            } else {
                return '';
            }
        },

        // 获取点击时间
        onClickTime(e) {
            const { orderWeek, Key, num } = e.detail;
            const { serverStoreObj } = this;
            this.setData({
                serverStoreList: [],
                week: num
            });
            let list = [];

            if (serverStoreObj[Key]) {
                list = serverStoreObj[Key].map((item) => {
                    let distance = (parseInt(item.distance) / 1000).toFixed(2) * 1000;
                    let newdistance = (Math.round(distance * 10) / 10000).toFixed(1);
                    return { ...item, newdistance: newdistance };
                });
            }

            this.setData({
                serverStoreList: list,
                today: orderWeek
            });
        },

        // 展示更多
        showmore() {
            this.setData({
                showLength: this.cardServerList.length
            });
        },

        // 查看详情作品
        onDetail(e) {
            const { item } = e.currentTarget.dataset; // let obj = JSON.stringify(item)

            uni.navigateTo({
                url: '/pages/workdetails/index?id=' + item.opusId
            });
        },

        //点击图片进行预览，长按保存分享图片
        previewImg(e) {
            uni.previewImage({
                current: e.currentTarget.dataset.item,
                // 当前显示图片的http链接
                urls: [e.currentTarget.dataset.item] // 需要预览的图片http链接列表
            });
        },

        // 展示3条
        showmuch() {
            this.setData({
                showLength: 2
            });
        },

        // 点击展示更多服务
        onShowList(e) {
            const { id, bool } = e.currentTarget.dataset;
            this.setData({
                cardServerList: this.cardServerList.map((item) => {
                    if (item.serviceId == id && bool != true && id) {
                        return { ...item, bool: true };
                    } else if (bool == true) {
                        return { ...item, bool: false };
                    } else {
                        return { ...item, bool: false };
                    }
                })
            });
        },

        // 点击解约
        terminate() {
            var that = this;
            uni.showModal({
                title: '是否与该美发师解约？',
                content: '您与美发师解约，与其绑定的精品服务将自动下架',

                success(res) {
                    if (res.confirm) {
                        _request
                            .postObj('/store/breakStoreNexus', {
                                stylistId: that.hair.stylistId,
                                storeId: that.storeId,
                                nexus: that.nexus
                            })
                            .then((res) => {
                                if (res.data.code === 200) {
                                    uni.showToast({
                                        title: '解约成功',
                                        icon: 'none',
                                        duration: 2000
                                    });
                                    setTimeout(() => {
                                        uni.navigateBack({
                                            delta: -1
                                        });
                                    }, 1000);
                                } else {
                                    uni.showToast({
                                        title: res.data.message,
                                        icon: 'none',
                                        duration: 2000
                                    });
                                }
                            });
                    } else if (res.cancel) {
                    }
                }
            });
        },

        // 取消入驻
        cancelInviteNexus() {
            let that = this;

            _request
                .get('/store/cancelInviteNexus', {
                    stylistId: that.hair.stylistId,
                    storeId: that.storeId
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: '取消成功',
                            icon: 'none',
                            duration: 1000
                        });
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: -1
                            });
                        }, 2000);
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: -1
                            });
                        }, 2000); // setTimeout(() => {
                        //   vm.onShow()
                        // }, 1000);
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 邀请入驻
        apply() {
            uni.navigateTo({
                url: '/pages/hairstylistdetails/joinshop/index?stylistId=' + this.hair.stylistId
            });
            var that = this;
        },

        // 同意
        agree() {
            var that = this;
            uni.showModal({
                title: '是否要同意该美发师的申请？',

                success(res) {
                    if (res.confirm) {
                        _request
                            .postObj('/store/consent', {
                                stylistId: that.hair.stylistId,
                                storeId: that.storeId,
                                nexus: that.nexus
                            })
                            .then((res) => {
                                if (res.data.code === 200) {
                                    uni.showToast({
                                        title: '入驻成功！',
                                        icon: 'none',
                                        duration: 2000
                                    });
                                    setTimeout(() => {
                                        uni.navigateBack({
                                            delta: -1
                                        });
                                    }, 1000);
                                } else {
                                    uni.showToast({
                                        title: res.data.message,
                                        icon: 'none',
                                        duration: 2000
                                    });
                                }
                            });
                    } else if (res.cancel) {
                    }
                }
            });
        },

        // 拒绝
        refuse() {
            var that = this;
            uni.showModal({
                title: '是否要拒绝该美发师的申请？',

                success(res) {
                    if (res.confirm) {
                        _request
                            .postObj('/store/refuse', {
                                stylistUserId: that.hair.userId,
                                storeUserId: uni.getStorageSync('userId'),
                                type: that.nexus
                            })
                            .then((res) => {
                                if (res.data.code === 200) {
                                    uni.showToast({
                                        title: '拒绝成功！',
                                        icon: 'none',
                                        duration: 2000
                                    });
                                    setTimeout(() => {
                                        uni.navigateBack({
                                            delta: -1
                                        });
                                    }, 1000);
                                } else {
                                    uni.showToast({
                                        title: res.data.message,
                                        icon: 'none',
                                        duration: 2000
                                    });
                                }
                            });
                    } else if (res.cancel) {
                    }
                }
            });
        },

        showmobileinfo: function () {
            this.setData({
                mobileinfovisible: true
            });
        },

        handleClosemobileinfo: function () {
            this.setData({
                mobileinfovisible: false
            });
        },

        // 显示电话
        onMobile(e) {
            const { mobile } = e.currentTarget.dataset;
            this.setData({
                showoverlay: true
            });
        },

        // 拨打电话
        goMobile() {
            uni.makePhoneCall({
                phoneNumber: this.hairlist.mobile //仅为示例，并非真实的电话号码
            });
        },

        // 隐藏电话
        onClickHide() {
            this.setData({
                showoverlay: false
            });
        },

        // 关闭弹窗
        onClose() {
            this.setData({
                show: false
            });
        },

        // 点击展示美发师优惠
        onShowmeal() {
            this.setData({
                showmeal: true
            });
        },

        // 隐藏美发师优惠
        onClose() {
            this.setData({
                showmeal: false
            });
        },

        // 领取优惠券
        getdrawCoupon(e) {
            const { couponId, type } = e.currentTarget.dataset.item;

            _request
                .postObj('/storeCouponCode/drawCoupon', {
                    userId: uni.getStorageSync('userid'),
                    type: type,
                    couponId: couponId
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        // 美发师详情
                        this.getCard();
                        this.setData({
                            showmeal: false
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 购买套餐
        toBuymeal(e) {
            const { id } = e.currentTarget.dataset;
            uni.navigateTo({
                url: '/pages/buymealdetails/index?id=' + id
            });
        },

        // 解约
        onTerminate() {
            _request
                .postObj('/store/breakStoreNexus', {
                    stylistId: this.hair.stylistId,
                    storeId: this.storeId,
                    nexus: this.nexus
                })
                .then((res) => {
                    this.setData({
                        show: false
                    });

                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '解约成功',
                            icon: 'none',
                            duration: 2000
                        });
                    } else {
                        uni.showToast({
                            title: '解约失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                });
        },

        // 发型师评论详情
        getStylistCommentList(e, id, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .get('/stylistComment/getStylistCommentList', {
                    page: e,
                    size: 10,
                    stylistId: id,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    var commentList = res.data.data;

                    for (let i = 0; i < commentList.length; i++) {
                        commentList[i]['createtime'] = commentList[i]['createtime'].substring(0, 10);

                        if (commentList[i]['comment'].length >= 60) {
                            commentList[i]['bool'] = true;
                        } else {
                            commentList[i]['bool'] = false;
                        }

                        commentList[i]['comment'] = decodeURIComponent(commentList[i]['comment']);
                        commentList[i]['storeReply'] = decodeURIComponent(commentList[i]['storeReply']);
                        commentList[i]['reply'] = decodeURIComponent(commentList[i]['reply']);
                    } // var listTemps = this.data.commentList;
                    // for (let i = 0; i < commentList.length; i++) {
                    //   listTemps.push(commentList[i]);
                    // }

                    this.setData({
                        commentList: [...this.commentList, ...commentList]
                    });

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    } // console.log(error, 'error');
                });
        },

        // 前往门店详情
        toShopdetails(e) {
            const { item } = e.currentTarget.dataset;
            let obj = JSON.stringify(item); // let obj = JSON.stringify(item.storeId)

            uni.navigateTo({
                url: '/pages/shopdetails/index?shop=' + obj
            });
        },

        // 获取服务门店数据
        getStylistStores(e, id, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .postObj('/stylistServer/getStylistStores', {
                    page: e,
                    size: 10,
                    stylistId: id,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.data && res.data.data != null) {
                        this.setData({
                            serverStoreList: res.data.data.map((item) => {
                                let distance = (parseInt(item.distance) / 1000).toFixed(2) * 1000;
                                let newdistance = (Math.round(distance * 10) / 10000).toFixed(1);
                                return { ...item, newdistance };
                            })
                        });
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error, 'error');
                });
        },

        // 获取七日门店数据
        getStylistStoresInfos(id, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .postObj('/stylistServer/getStylistStoresInfos', {
                    stylistId: id,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    let data = res.data.data ? res.data.data : [];
                    let today = getSevenDay()[0].Key;
                    let list = data[today] ? data[today] : [];

                    if (res.data.data && res.data.data != null) {
                        this.setData({
                            today,
                            serverStoreObj: res.data.data,
                            serverStoreList: list.map((item) => {
                                let distance = (parseInt(item.distance) / 1000).toFixed(2) * 1000;
                                let newdistance = (Math.round(distance * 10) / 10000).toFixed(1);
                                return { ...item, newdistance };
                            })
                        });
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error, 'error');
                });
        },

        // 预约
        onHairMake(e) {
            const { item } = e.currentTarget.dataset;
            let hair = JSON.stringify(this.hair);
            let shop = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/bookingorder/index?hair=' + hair + '&shop=' + shop
            });
        },

        // 美发师获取作品
        getScreenDynamicState() {
            let data = {
                featureId: 0,
                hairstyleId: 0,
                lastId: 0,
                stylistId: this.hair.stylistId,
                userId: uni.getStorageSync('userid')
            };

            _request
                .postObj('/dynamicState/getScreenDynamicState', { ...data })
                .then((res) => {
                    if (res.data.code == 200 && res.data.data.length > 0) {
                        this.setData({
                            exhiblist: res.data.data,
                            lastId: res.data.data[res.data.data.length - 1].opusId
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 点击作品收藏
        onLove(e) {
            const { opusid, iscollection } = e.currentTarget.dataset;

            _request
                .postObj('/storeStylist/oupsCollection', {
                    stylistId: this.hair.stylistId,
                    opusId: opusid,
                    userId: uni.getStorageSync('userid'),
                    type: iscollection ? 0 : 1
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            exhiblist: this.exhiblist.map((item) => {
                                if (item.opusId === opusid) {
                                    return { ...item, isCollection: !iscollection, collection: !iscollection ? item.collection + 1 : item.collection - 1 };
                                }

                                return item;
                            })
                        });
                        uni.showToast({
                            title: iscollection ? '取消收藏' : '收藏成功',
                            icon: 'none',
                            duration: 2000
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 点击收藏
        onCollection(e) {
            const { stylistid } = e.currentTarget.dataset;

            _request
                .postObj('/store/storeCollection', {
                    userId: uni.getStorageSync('userid'),
                    stylistId: stylistid,
                    type: this.bool ? '0' : '1'
                })
                .then((res) => {
                    this.setData({
                        bool: !this.bool
                    });
                    uni.showToast({
                        title: this.bool ? '收藏成功' : '取消收藏',
                        icon: 'none',
                        duration: 2000
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // tabs切换
        onChange(event) {
            this.setData({
                active: event.detail.index
            });
        },

        // 查看全文
        toMore(e) {
            let index = e.currentTarget.dataset.index;
            var commentList = this.commentList;

            if (commentList[index]['showtext']) {
                commentList[index]['showtext'] = false;
            } else {
                commentList[index]['showtext'] = true;
            }

            this.setData({
                commentList: commentList
            });
        },

        // 查看更多详情简介
        toMorebrief() {
            this.setData({
                showbrief: !this.showbrief
            });
        },

        // 查看更多详情擅长
        toMoreadept() {
            this.setData({
                showadept: !this.showadept
            });
        },

        shop() {
            console.log('占位：函数 shop 未声明');
        },

        onClickmealHide() {
            console.log('占位：函数 onClickmealHide 未声明');
        }
    }
};
</script>
<style>
page {
    background: #fbfbfb;
}

.page {
    padding: 20rpx;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* 发型师 */
.flexbox {
    display: flex;
    flex-wrap: nowrap;
    height: 160rpx;
}

.flextitle {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.titletext1 {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.titletext2 {
    display: block;
    padding: 0 20rpx;
    height: 32rpx;
    background: #ff8722;
    border-radius: 5px 0px 5px 0px;
    color: white;
    font-size: 20rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

.age {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 34rpx;
}

.order {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
}

.obtain {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 34rpx;
}

.briefbox {
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.morebrief {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
}

.adept {
    padding: 0rpx 10rpx;
    height: 42rpx;
    background: #ffe8d4;
    border-radius: 4px;
    line-height: 42rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    margin-right: 20rpx;
    float: left;
    margin-bottom: 10rpx;
}

.adeptList {
    width: 98%;
}

.adeptList > .mstext {
    float: left;
}

.adeptbox {
    position: relative;
    display: flex;
    height: 20px;
    overflow: hidden;
}

.adeptbox1 {
    position: relative;
    display: flex;
}

.adeptbtn {
    position: absolute;
    right: 0;
    top: 3rpx;
}

.mstext {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
}

.brief {
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
}

.showbtn {
    width: 100%;
    text-align: center;
}

.topicon {
    width: 40rpx;
    height: 40rpx;
}

.works {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
}

.hair {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    box-sizing: border-box;
    padding: 30rpx 40rpx 30rpx 20rpx;
}

.iconfelx {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-top: 20rpx;
}

.shopicon {
    width: 30rpx;
    height: 30rpx;
}

.shopicon3 {
    width: 32rpx;
    height: 32rpx;
}

.shopicon1 {
    width: 52rpx;
    height: 52rpx;
}

.iconfelx > text {
    width: 100%;
    text-align: center;
    margin-top: 20rpx;
}

.icontext {
    font-size: 28rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ff8722;
}

.headerimg {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
}

.time1 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
}

.time2 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    line-height: 40rpx;
}

/* 价格表 */
.xjcbox {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10rpx 20rpx 10rpx 40rpx;
}

.shopicon4 {
    width: 40rpx;
    height: 40rpx;
}

.flexbox3 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top: 20rpx;
    align-items: center;
}

.showtext1 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff1b0b;
    line-height: 40rpx;
}

.showtext2 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 40rpx;
}

.dotbox {
    width: 22rpx;
    height: 22rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10rpx;
}

.bigdot {
    width: 22rpx;
    height: 22rpx;
    background: #ff8722;
    opacity: 0.19;
    border-radius: 50%;
    position: absolute;
    margin: 0 auto;
}

.smalldot {
    width: 10rpx;
    height: 10rpx;
    background: #ff8722;
    border-radius: 50%;
    z-index: 1;
    position: absolute;
    margin: 0 auto;
}

.showleft {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* 服务门店 */
.shop {
    height: 100%;
    width: 670rpx;
    margin: 0 40rpx;
    background: #fbfbfb;
    position: relative;
    top: -90rpx;
}

.shopbox {
    width: 710rpx;
    /* height: 240rpx; */
    min-height: 240rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
}

.shopleft {
    height: 100%;
    width: 454rpx;
    display: flex;
    flex-wrap: nowrap;
    /* margin-right: 56rpx; */
}

.shopleft > view:nth-child(1) {
    margin: 20rpx 30rpx 20rpx 20rpx;
}

.shopleft > view:nth-child(2) {
    margin: 20rpx 0 20rpx 0;
}

.shopleft view:nth-child(1) view:nth-child(2) {
    margin: 20rpx 30rpx 20rpx 20rpx;
}

.shopright {
    height: 100%;
    width: 130rpx;
    margin-right: 20rpx;
}

.shopright > view:nth-child(1) {
    height: 32rpx;
    margin: 20rpx 0 0 0;
    text-align: right;
}

.shopright > view:nth-child(2) {
    width: 120rpx;
    height: 48rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 24rpx;
    margin-top: 116rpx;
    text-align: center;
    color: white;
    margin-right: 20rpx;
    font-size: 28rpx;
    line-height: 48rpx;
}

.shopleft .names {
    width: 256rpx;
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.shopimg {
    width: 160rpx;
    height: 200rpx;
}

.shopleft .score > view {
    width: 112rpx;
    height: 32rpx;
    font-size: 20rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 32rpx;
    background: #ffe4ce;
    border-radius: 5px 0px 5px 0px;
    text-align: center;
    margin: 24rpx 22rpx 18rpx 0;
}

.shopleft > view:nth-child(2) > view:nth-child(3) > text:nth-child(1) {
    font-size: 22rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
}

.shopleft > view:nth-child(2) > view:nth-child(3) > text:nth-child(2) {
    font-size: 22rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #999;
    line-height: 34rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.site {
    clear: both;
    width: 500rpx;
}

.clip {
    width: 24rpx;
    height: 22rpx;
}

.map > text {
    width: 166rpx;
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #999999;
    line-height: 34rpx;
    margin-right: 10rpx;
}

.score > text {
    width: 36rpx;
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
    margin-left: 6rpx;
}

/* 评价 */
.evaluate {
    width: 710rpx;
    height: 80rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 20rpx;
    box-sizing: border-box;
}

.evaluateimg {
    width: 40rpx;
    height: 40rpx;
}

.evaluatelistbox > view {
    display: flex;
}

.mr-5 {
    margin-right: 5rpx;
}

.evatext {
    height: 32rpx;
    font-size: 30rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    margin: 20rpx;
    line-height: 40rpx;
}

.headerimg1 {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
}

.usercomment {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    padding: 30rpx 20rpx 20rpx 20rpx;
    box-sizing: border-box;
}

.usertile {
    justify-content: space-between;
}

.textfelx {
    width: 300rpx;
}

.usertext1 {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.usertext2 {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 34rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.usertext3 {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.evatime {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
}

.evatext1 {
    height: 32rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ff8722;
    line-height: 40rpx;
    margin: 10rpx;
}

.evaluate1 {
    height: 120rpx;
    text-align: right;
}

.usereva {
    margin-top: 20rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 40rpx;
}

.userevatext1 {
    height: 100%;
}

.userevatext {
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.more {
    height: 120rpx;
    height: 34rpx;
    font-size: 12px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
}

.img-200 {
    height: 200rpx;
    width: 200rpx;
}

.imglistflexbox {
    display: flex;
    flex-wrap: wrap;
}

/* 组件样式 */

.van-tabs__nav,
.custom-class,
.van-tabs__scroll--line {
    background: #fbfbfb !important;
}

.van-tab--active {
    font-size: 36rpx !important;
}

.nav-class {
    width: 600rpx;
}

.van-tabs__line {
    background: #ff8722 !important;
}

.van-tab {
    height: 100%;
}

.show {
    display: block;
}

.hidden {
    display: none;
}

van-tabs {
    width: -webkit-fill-available !important;
}

/* 优惠区 */
.mealbox {
    width: 710rpx;
    /* height: 128rpx; */
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    line-height: 128rpx;
}

.mldetails {
    height: 68rpx;
    background: #ff8722;
    border-radius: 17px;
    padding: 0 18rpx;
    line-height: 68rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: inline-block;
    width: max-content;
    margin-left: 20rpx;
}

.view_list {
    width: 100%;
    text-align: center;
    display: flex;
}

/* 展示区 */
.exhibitionbox {
    display: flex;
    flex-wrap: wrap;
    margin: 20rpx 20rpx;
    justify-content: space-between;
}

.exhibition {
    width: 320rpx;
    height: 460rpx;
    background-color: white;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    margin-bottom: 40rpx;
}

.exhibition > view:nth-child(2) {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 34rpx;
    margin: 10rpx;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

/* .exhibition>view:nth-child(3) {
  height: 68rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  margin-bottom: 22rpx;
  margin-left: 10rpx;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
} */

.exhibition > view:nth-child(4),
.exhibition > view:nth-child(4) > view:nth-child(1) {
    height: 60rpx;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    line-height: 60rpx;
    text-align: center;
}

.exhibition > view:nth-child(4) {
    justify-content: space-between;
    margin-right: 10rpx;
    margin-left: 10rpx;
}

.exhibition > view:nth-child(4) > view:nth-child(1) > text {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    margin-left: 20rpx;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.exhibition > view:nth-child(4) > view:nth-child(2) > text {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    margin-left: 10rpx;
}

.exhibitionimg1 {
    height: 320rpx;
    width: 320rpx;
}

.exhibitionimg2 {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    display: inline-table;
}

.loveicon {
    width: 28rpx;
    height: 28rpx;
}

/* 时间 */
.datebox {
    margin: 0 20rpx;
    width: 710rpx;
    border-bottom: 1px solid #d2d2d2;
    display: flex;
    overflow-x: auto;
}

.date {
    width: 110rpx;
    height: 74rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    margin-right: 40rpx;
    display: inline-table;
    padding: 10rpx 0;
}

.activetext {
    color: #ff8722;
}

/* 解约 */
.cencel-container {
    border: 1px solid #ff8722;
    width: 680rpx;
    height: 80rpx;
    border-radius: 40px;
    text-align: center;
    margin-top: 20rpx;
    background-color: #ff8722;
}

.cencel-container-o {
    border: 1px solid #ff8722;
    width: 680rpx;
    height: 80rpx;
    border-radius: 40px;
    text-align: center;
    margin-top: 20rpx;
}

.cencel-container-o .cencel {
    color: #ff8722;
}

.cencel-container-9 {
    width: 680rpx;
    height: 80rpx;
    border-radius: 40px;
    text-align: center;
    margin-top: 20rpx;
    background-color: #ececec;
}

.cencel {
    font-size: 32rpx;
    color: white;
    line-height: 80rpx;
    font-weight: bold;
}

/* 入驻申请 */
.accept-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 40rpx;
    margin-top: 40rpx;
    box-sizing: border-box;
}

.warn {
    margin-top: 10rpx;
    font-size: 26rpx;
    color: #333;
}

.refuse {
    width: 300rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #d1d1d1;
    border-radius: 22px;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
}

.agree {
    width: 300rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #ff8722;
    border-radius: 22px;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
}

/* 价格表 */
.mealds {
    width: 710rpx;
    /* height: 394rpx; */
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    padding: 20rpx 20rpx 40rpx 20rpx;
    box-sizing: border-box;
    margin: 20rpx 20rpx 0 20rpx;
}

.mdlsflexbox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top: 10rpx;
}

.sybtext1 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 40rpx;
    margin-left: 10rpx;
}

.menu-price {
    color: #ff1b0b;
    font-size: 28rpx;
    font-weight: 500;
}

.menu-detail {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
}

.menu-pro {
    margin-left: 0rpx;
    position: relative;
}

.circle-1 {
    width: 5px;
    height: 5px;
    background-color: #ff8722;
    border-radius: 50%;
    box-shadow: 0 0 0 2.5px #f1d5bd;
    margin: auto;
}

/* 底部电话弹窗 */

.zindex-99 {
    z-index: 99;
}

.overlaybox {
    position: absolute;
    bottom: 170rpx;
    margin: 0 20rpx;
    width: 710rpx;
    background-color: white;
    border-radius: 20rpx;
}

.overlaybox1 {
    height: 100rpx;
    border-radius: 80rpx;
    line-height: 100rpx;
    text-align: center;
    color: #007aff;
}

.overlaytext1 {
    text-align: center;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000;
    height: 50rpx;
}

.overlaytext2 {
    text-align: center;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000;
    height: 50rpx;
}

.overlaybox2 {
    width: 710rpx;
    height: 100rpx;
    background-color: white;
    line-height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    margin: 0 20rpx;
    margin-top: 30rpx;
    border-radius: 80rpx;
    color: #007aff;
    position: absolute;
    bottom: 50rpx;
}

/* 优惠券 */
.coupon-container {
    display: flex;
    flex-direction: row;
    background-color: #fff;
    margin-top: 0rpx;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.coupon-content {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* justify-content: center; */
    /* height: 180rpx; */
    margin-left: 10rpx;

    position: relative;
}

.single-coupon {
    width: 270rpx;
    height: 52rpx;
    margin-top: 26rpx;
    margin-left: 10rpx;
}

.single-coupon-title {
    position: absolute;
    left: 70rpx;
    top: 32rpx;
    color: #673b03;
    font-size: 28rpx;
}

.single-coupon-buy {
    position: absolute;
    left: 240rpx;
    top: 32rpx;
    color: #673b03;
    font-size: 28rpx;
    align-items: center;
}

.discount-coupon-title {
    position: absolute;
    left: 70rpx;
    top: 32rpx;
    color: #ffffff;
    font-size: 28rpx;
}

.discount-coupon-buy {
    position: absolute;
    left: 240rpx;
    top: 32rpx;
    color: #ffffff;
    font-size: 28rpx;
    align-items: center;
}

/* 美发师优惠 */
.mealbox {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 10rpx;
    margin: 20rpx 0;
    padding: 20rpx;
    box-sizing: border-box;
}

.mealbox1 {
    /* height: 40rpx; */
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #673b03;
    line-height: 40rpx;
    display: flex;
}

.mealimgbox {
    position: relative;
}

.mealimg {
    width: 270rpx;
    height: 52rpx;
}

.mealtext1 {
    position: absolute;
    left: 30px;
    right: 0;
    top: 2px;
    bottom: 0;
    margin: 0 auto;
}

.mealtext2 {
    position: absolute;
    right: 10rpx;
    top: 2px;
}

.mealbox2 {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    height: 42rpx;
}

.mealtext3 {
    height: 42rpx;
    border-radius: 4rpx;
    border: 1px solid rgba(226, 82, 44, 0.39);
    line-height: 42rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e2522c;
    padding: 0 10rpx;
}

.mealtext4 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

/* 美发师优惠弹窗 */
.overlaymealbox {
    position: absolute;
    bottom: 0rpx;
    width: 750rpx;
    background-color: white;
    border-radius: 6px 6px 0px 0px;
    padding: 0 20rpx 20rpx 20rpx;
    box-sizing: border-box;
    height: 600rpx;
    overflow: auto;
    z-index: 99;
}

.box-1 {
    width: 710rpx;
    background: #fff6ef;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    position: relative;
    padding: 44rpx 20rpx 20rpx 20rpx;
    box-sizing: border-box;
}

.meal-title {
    width: 100%;
    height: 50rpx;
    margin: 0rpx 0 40rpx 0;
    text-align: center;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
}

.shopcoupon {
    width: 88rpx;
    height: 28rpx;
    background: #ffe2c9;
    border-radius: 5px 0px 5px 0px;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 28rpx;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

/* 弹窗 */
.msg {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
    margin-top: 40rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.box {
    margin: 60rpx 0;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.box1 {
    border-radius: 10rpx;
    box-sizing: border-box;
    margin: 10rpx 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
}
.centerx {
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    margin: 15rpx 0;
    background: rgb(246, 246, 246);
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    padding: 20rpx;
}
/* .centers+.centers{
  margin-top: 15rpx;
} */

.placeholder-class {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

/* 跳窗样式 */
.btn1 {
    width: 268rpx;
    height: 96rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #999999;
    position: relative;
}

.btn2 {
    width: 268rpx;
    height: 96rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    position: relative;
}

.btnimg {
    width: 268rpx;
    height: 96rpx;
    position: absolute;
}

.btntext {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 86rpx;
}

.shopmanager-server-time {
    font-size: 40rpx;
    text-align: center;
    width: 100%;
    line-height: 40rpx;
    margin-bottom: 40rpx;
}

.hairstylelistdetails-tab-item {
    min-height: 600rpx;
}

.c-text1 {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.c-text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    width: -webkit-fill-available;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.c-text3 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 34rpx;
    position: absolute;
    top: 20rpx;
    right: 20rpx;
}

.c-text4 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

.c-text6 {
    font-size: 72rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
}

.c-text7 {
    font-size: 44rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
}

.c-btn1 {
    width: 140rpx;
    height: 48rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(223, 223, 223, 0.26);
    border-radius: 24rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    line-height: 48rpx;
}

.content {
    margin-left: 28rpx;
}

.header {
    width: 160rpx;
    height: 160rpx;
}

.text1 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 34rpx;
}

.text2 {
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 17px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.text3 text:nth-child(1) {
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1b0b;
    line-height: 22px;
}

.text3 text:nth-child(2) {
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #999999;
    line-height: 17px;
    text-decoration: line-through;
    margin-left: 18rpx;
}

.c-btn2 {
    width: 140rpx;
    height: 48rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(223, 223, 223, 0.26);
    border-radius: 24rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    line-height: 48rpx;
    position: absolute;
    right: 20rpx;
    bottom: 10rpx;
}

.single {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin-top: 20rpx;
    box-sizing: border-box;
    position: relative;
    margin-top: 20rpx;
}

.icon1 {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
}

.overlaymealbox .icon1 {
    position: absolute;
    right: 10rpx;
    top: 20rpx;
}

.detail-serverness {
    font-size: 25rpx;
    margin: 20rpx auto;
    width: 710rpx;
    color: #666666;
    text-align: center;
    background-color: #fff;
    height: 100rpx;
    line-height: 100rpx;
}

/* 服务 */
.serverList {
    width: 670rpx;
    margin: 0 20rpx;
    padding: 20rpx 0;
    border-bottom: 2px solid #ededed;
}

.serverFlex-1 {
    display: flex;
    margin-top: 20rpx;
}

.serviceName {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 900;
    color: #333333;
    line-height: 44rpx;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.servermoneySection {
    color: #ff1b0b;
    margin-right: 20rpx;
}

.serverFlex-2 {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.serverFlex-name {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 104rpx;
}

.serverFlex-price {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 900;
    color: #ff1b0b;
    line-height: 44rpx;
}

.serverImg {
    width: 100rpx;
    height: 100rpx;
}

/*  重写 checkbox 样式  */
/* 未选中的 背景样式 */
checkbox .wx-checkbox-input {
    border-radius: 10%;
    border: 2px solid #666;
    /* 圆角 */
    width: 32rpx;
    /* 背景的宽 */
    height: 32rpx;
    /* 背景的高 */
}

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    border-radius: 10%;
    border: 2px solid #ff8722;
    background: #fff !important;
}

/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    /* 圆角 */
    width: 32rpx;
    /* 选中后对勾大小，不要超过背景的尺寸 */
    height: 32rpx;
    /* 选中后对勾大小，不要超过背景的尺寸 */
    line-height: 30rpx;
    text-align: center;
    font-size: 30rpx;
    /* 对勾大小 30rpx */
    color: #ff8722;
    /* 对勾颜色 白色 */
    background: transparent;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}

/* 未选中的 背景样式 */
radio .wx-radio-input {
    /* 圆角 */
    width: 30rpx;
    height: 30rpx;
    border-color: #666;
}

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked {
    border: none;
    background: #fff;
}

/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before {
    /* 圆角 */
    width: 30rpx;
    /* 选中后对勾大小，不要超过背景的尺寸 */
    height: 30rpx;
    /* 选中后对勾大小，不要超过背景的尺寸 */
    line-height: 30rpx;
    text-align: center;
    font-size: 30rpx;
    /* 对勾大小 30rpx */
    color: #fff;
    /* 对勾颜色 白色 */
    background: transparent;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}

/* 已选服务 */
.server-selected {
    width: 100%;
    position: fixed;
    z-index: 10;
    bottom: 150rpx;
    background-color: #fff;
    padding: 0rpx 20rpx;
    box-sizing: border-box;
}

.selected-header {
    height: 104rpx;
    line-height: 104rpx;
    box-sizing: border-box;
}

.selected-header-title1 {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 104rpx;
}

.selected-header-title2 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 104rpx;
}

.selected-img {
    width: 80rpx;
    height: 80rpx;
}

.selected-name {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
    width: 100%;
}

.selected-money {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1b0b;
    line-height: 40rpx;
    width: 100%;
}

.selected-cancel {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 124rpx;
}

.h-124 {
    height: 124rpx;
    width: 100%;
    border-bottom: 1px solid #d2d2d2;
    padding: 0 22rpx;
    box-sizing: border-box;
}

.selected-centers {
    display: flex;
    margin: 10rpx 0;
    flex-wrap: wrap;
}

.mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #101010;
    opacity: 0.4;
    z-index: 5;
}

/* 提交按钮 */
.btn {
    width: 100%;
    position: fixed;
    height: 150rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-self: center;
    padding: 0rpx 40rpx;
    box-sizing: border-box;
    z-index: 10;
    bottom: 0;
}

.buytext1 {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
}

.buytext2 {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1b0b;
}

.buytext4 {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
}

.buytext3 {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    width: 140rpx;
    height: 60rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 15px;
    color: white;
    line-height: 60rpx;
    text-align: center;
}

/* 精品推荐 */
.padding-lr-sms {
    flex-wrap: wrap;
}

.goods_info {
    width: 340rpx;
    position: relative;
    box-shadow: 0px 4px 8px 0px rgba(230, 230, 230, 0.5);
}

.goods_sold {
    position: absolute;
    left: 0;
    top: 300rpx;
    line-height: 46rpx;
    border-radius: 0 20rpx 20rpx 0;
    background-color: rgb(0, 0, 0, 0.5);
}

.goods_img {
    width: 340rpx;
    height: 340rpx;
    border-radius: 10rpx 10rpx 0 0;
}
</style>
